import React, { useEffect, useState, useContext } from 'react'
import { Button } from 'antd'
import { RetweetOutlined, PlusOutlined } from '@ant-design/icons'
import ModalTable from '&/components/ModalTable'
import AddPlan from '&/components/AddPlan'
import { getWarnPlanList } from '@/api/electricity'
import { LayoutContext } from '../context'

import './index.scss'

export default function PlanInfo() {

  const {activePlan, setActivePlan, setPlanInfos, activeKey} = useContext(LayoutContext)
  const [addVisible, setAddVisible] = useState(false)
  const [visible, setVisible] = useState(false)

  useEffect(() => {
    getPlans()
  }, [])

  const getPlans = (update=true) => {
    getWarnPlanList().then((data) => {
      setPlanInfos(data)
      if(update) setActivePlan(data[0])
    })
  }

  return <>
    {visible && <ModalTable
      setVisible={setVisible}
      visible={visible}
    />}
    <AddPlan 
      setVisible={setAddVisible}
      visible={addVisible}
      getPlans={getPlans}
    />
    <div className='layout-plan-info'>
      <div>
        <div>预案信息</div>
        <div>
          <div><div>预案名称：</div><i>{activePlan ? activePlan['plan_name'] : ''}</i></div>
          <div><div>开始时间：</div><i>{activePlan ? activePlan['start_time'] : ''}</i></div>
          <div><div>预案级别：</div><i>{activePlan ? activePlan['plan_level'] : ''}</i></div>
        </div>
        <div>
          <Button 
            type="primary" 
            shape="circle" 
            icon={<RetweetOutlined />} 
            onClick={() => {setVisible(true)}}
          />
          {activeKey === 'NewPlanLaunch' && <Button 
            type="primary" 
            shape="circle" 
            icon={<PlusOutlined />} 
            onClick={() => {setAddVisible(true)}}
          />}
        </div>
      </div>
    </div>
  </>
}
